<template>
  <div class="platform-box">
    <div class="mian">
      <div class="platform-wrapper">
        <!-- 微信号列表 -->
        <div class="wechat-wrapper">
          <div class="wechat-list-box">
            <div class="wechat-list-wrapper">
              <!-- 筛选条件 -->
              <div class="filter-box">
                <div class="filter-left">
                  <span class="search-input-box">
                    <el-input
                      type="text"
                      clearable
                      placeholder='请输入公众号名'
                      v-model='wechatSearchInfo.wechatName'>
                    </el-input>
                  </span>
                  <span class="search-input-box ml16">
                    <el-input
                      type="text"
                      clearable
                      placeholder='请输入appid'
                      v-model='wechatSearchInfo.appid'>
                    </el-input>
                  </span>
                  <span class="search-select-box ml16">
                    <el-select
                      clearable
                      filterable
                      v-model="wechatSearchInfo.tenantId"
                      placeholder="请选择租户">
                      <el-option v-for='item in tenantList'
                        :key='item.tenantId'
                        :label='item.tenantName'
                        :value='item.tenantId'>
                      </el-option>
                    </el-select>
                  </span>
                  <div class="search-btn ml10"
                    @click="handleWechatSearch()">查询</div>
                </div>
                <div class="filter-right"></div>
              </div>
              <ul class="wechat-list">
                <li class="wechat-item active"
                  v-for="(info, i) in wechatList"
                  :key="`wechat${i}`">
                  <div class="title">
                    <p class="name">{{info.wechatName}}</p>
                  </div>
                  <div class="info">
                    <div class="info-left">
                      <p class="text">编号：{{info.id}}</p>
                      <p class="text">微信：{{info.wechatUid || ''}}</p>
                      <p class="text">类型：{{info.wechatType == '1'? '订阅号' : '服务号'}}</p>
                      <p class="text">粉丝：{{info.fansCount}}</p>
                      <p class="text time">创建：{{info.authorizationTime}}</p>
                    </div>
                    <div class="info-right">
                      <div v-if="!info.isAuth" class="status">未认证</div>
                      <div v-else class="status active">已认证</div>
                      <div class="qrcode">
                        <img :src="getWxImg(info.qrcodeImg)" alt="">
                      </div>
                    </div>
                    <div class="btn-wrapper">
                      <!-- <p @click="handleChage(info, 'wechat')" class="btn">选择公众号</p> -->
                      <p class="btn"
                        @click="showEditWecht(info)">编辑</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <el-pagination
              style="width:100%;text-align:center;margin-top:20px;"
              background
              :total="count"
              :current-page="page"
              :page-size="pageSize"
              :page-sizes="pageSizesG"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="sizes, prev, pager, next">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑公众号信息 -->
    <el-dialog
      append-to-body
      width="600px"
      title="编辑公众号信息"
      :close-on-click-modal="false"
      :visible.sync="editWechatDialog"
      @close="resetAddSubscription()"
      class='edit-wechat-dialog'>
      <el-form
        :model="wechatInfo"
        :rules="rulesEdit"
        ref="addSubscriptionRef"
        label-width="120px"
        label-position="left"
        class="demo-ruleForm">
        <div class='form-split'>
          <span class='split-title'>公众号信息</span>
          <span class='split-line'></span>
        </div>
        <!-- <div style="display: flex;justify-content: center;margin-bottom: 20px;">
          <div v-if="wechatInfo.qrcodeImg" class="wechat-icon" :style="{backgroundImage: 'url(' + getWxImg(wechatInfo.qrcodeImg) + ')'}"></div>
          <div v-else class="wechat-icon"></div>
        </div> -->
        <el-form-item
          label="公众号类型"
          prop="wechatType">
          <el-radio-group
            :disabled="true"
            v-model="wechatInfo.wechatType">
            <el-radio label="2">服务号</el-radio>
            <el-radio label="1">订阅号</el-radio>
            <!-- <el-radio label="work">企业微信</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="公众号主体"
          prop="principalName">
          <el-input
            :disabled="true"
            placeholder="请输入公众号认证主体名称"
            v-model.trim="wechatInfo.principalName">
          </el-input>
        </el-form-item>
        <el-form-item
          label="公众号原始ID"
          prop="wechatUid">
          <el-input
            :disabled="true"
            placeholder="请输入公众号原始ID"
            v-model.trim="wechatInfo.wechatUid">
          </el-input>
        </el-form-item>
        <el-form-item
          label="公众号名称"
          prop="wechatName">
          <div style="display: flex">
            <el-input
              :disabled="true"
              placeholder="请输入公众号名称"
              maxlength="32"
              v-model.trim="wechatInfo.wechatName">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="公众号AppId"
          prop="appId">
          <div style="display: flex">
            <el-input
              :disabled="true"
              placeholder="请输入公众号AppId"
              v-model.trim="wechatInfo.appId">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="公众号Secret"
          prop="appSecret">
          <el-input
            :disabled="true"
            placeholder="请输入公众号Secret"
            v-model.trim="wechatInfo.appSecret">
          </el-input>
        </el-form-item>
        <div
          v-show="wechatInfo.wechatType == 1 && serviceList.length"
          class='settingBox-header'>
          <span class='iconfont'>&#xe69e;</span> 提示：若想在订阅号中提升功能权限可选择服务号“订阅号+服务号”来提升能力！
        </div>
        <el-form-item
          v-show="wechatInfo.wechatType == 1 && serviceList.length"
          label="功能升级号"
          class='article-authority'>
          <span class="form-select-box">
            <el-select
              :disabled="true"
              v-model="wechatInfo.expandAppid"
              placeholder="请选择"
              class='actionPermit-select'>
              <el-option v-for='item in serviceList'
                :key='item.appId'
                :label='item.wechatName'
                :value='item.appId'>
              </el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item
          label="租户"
          prop="tenantId">
          <span class="form-select-box">
            <el-select
              clearable
              filterable
              v-model="wechatInfo.tenantId"
              placeholder="请选择租户">
              <el-option v-for='item in tenantList'
                :key='item.tenantId'
                :label='item.tenantName'
                :value='item.tenantId'>
              </el-option>
            </el-select>
          </span>
        </el-form-item>
        <div class='form-split'>
          <span class='split-title'>公众号后台配置</span>
          <span class='split-line'></span>
        </div>
        <input id="copyTitle" class='hidden-input'>
        <el-form-item
          label="设置IP白名单"
          prop="ip"
          class='setting-item-wrapper'>
          <div class='setting-item'>
            <span class='item-content'>{{subSetting.ip}}</span>
            <span class='item-copy' @click='handleCopyTitle(subSetting.ip)'>复制</span>
          </div>
        </el-form-item>
        <el-form-item
          label="服务器地址(URL)"
          prop="url"
          class='setting-item-wrapper'>
          <div class='setting-item'>
            <span class='item-content' v-show='wechatInfo.appId'>{{subSetting.url}}/{{wechatInfo.appId}}</span>
            <span class='item-content' v-show='!wechatInfo.appId'>请先输入公众号Appid</span>
            <span class='item-copy'
                  v-show='wechatInfo.appId'
                 @click='handleCopyTitle(subSetting.url + "/" + wechatInfo.appId)'>复制</span>
          </div>
        </el-form-item>
        <el-form-item
          label="令牌(Token)"
          prop="token"
          class='setting-item-wrapper'>
          <div class='setting-item'>
            <span class='item-content'>{{subSetting.token}}</span>
            <span class='item-copy' @click='handleCopyTitle(subSetting.token)'>复制</span>
          </div>
        </el-form-item>
        <el-form-item
          label="EncodingAESKey"
          prop="encodingAesKey"
          class='setting-item-wrapper'>
          <div class='setting-item'>
            <span class='item-content'>{{subSetting.encodingAesKey}}</span>
            <span class='item-copy' @click='handleCopyTitle(subSetting.encodingAesKey)'>复制</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="saveWechatInfo()">确定</el-button>
        <el-button size="small" @click="editWechatDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TypeButton from '@/public/typeButton'
export default {
  components: {
    TypeButton
  },
  data () {
    return {
      loading: false,
      isAdmin: false, // 当前账号是否是超级管理员
      // 租户列表
      tenantList: [],
      // 公众号筛选条件
      wechatSearchInfo: {
        wechatName: '',
        appid: '',
        tenantId: ''
      },
      page: 1,
      pageSize: 10,
      count: 0,
      wechatList: [], // 公众号列表
      /* 编辑公众号 */
      editWechatDialog: false,
      currAppId: '',
      serviceList: [],
      wechatInfo: {
        wechatName: null,
        wechatType: null,
        appId: null,
        appSecret: null,
        encodingAesKey: null,
        wechatToken: null,
        principalName: null,
        wechatUid: null,
        expandAppid: null,
        tenantId: ''
      },
      // 手动授权-自动回显的信息
      subSetting: {
        ip: '',
        url: '',
        token: '',
        encodingAesKey: ''
      },
      rulesEdit: {
        tenantId: [{ required: true, message: '请选择租户', trigger: 'change' }]
      }
    }
  },
  methods: {
    /* 编辑公众号---开始 */
    showEditWecht (info) {
      this.currAppId = info.appId
      this.editWechatDialog = true
      this.fetchWechatAuthConfig()
      this.fetchServiceList()
      let url = `${this.SERVICE_WECHAT}/${this.currAppId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          this.wechatInfo = data
          if (data.tenantId) {
            this.wechatInfo.tenantId = Number(data.tenantId)
          }
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    // 获取公众号后台配置
    fetchWechatAuthConfig () {
      let url = `${this.SERVICE_WECHAT}/authorization/${this.currAppId}`
      this.get(url).then(res => {
        this.isLoading = false
        if (res.data.code === 200 && res.data.data) {
          let data = res.data.data
          this.subSetting.ip = data.ips.join('; ')
          this.subSetting.url = data.serverAddr
          this.subSetting.token = data.wechatToken
          this.subSetting.encodingAesKey = data.encodingAesKey
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    // 关闭手动授权重置表单
    resetAddSubscription () {
      this.currAppId = ''
      this.$refs.addSubscriptionRef.resetFields()
      this.wechatInfo.wechatName = null
      this.wechatInfo.wechatType = null
      this.wechatInfo.appId = null
      this.wechatInfo.appSecret = null
      this.wechatInfo.encodingAesKey = null
      this.wechatInfo.wechatToken = null
      this.wechatInfo.principalName = null
      this.wechatInfo.wechatUid = null
      this.wechatInfo.expandAppid = null
      this.wechatInfo.tenantId = null
    },
    saveWechatInfo () {
      this.$refs.addSubscriptionRef.validate((valid) => {
        if (valid) {
          this.confirmEditWechat()
        } else {
          this.$message({
            message: '请填写必填项',
            type: 'warning'
          })
        }
      })
    },
    // 添加新公众号
    confirmEditWechat () {
      let url = `${this.SERVICE_WECHAT}/${this.currAppId}/${this.wechatInfo.tenantId}`
      this.posts(url).then(res => {
        if (res.data.code === 200) {
          this.editWechatDialog = false
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    /* 编辑公众号---结束 */
    // 获取当前账号下的公众号列表
    fetchWechatList () {
      if (this.loading) {
        return
      }
      this.loading = true
      // 公众号列表
      let url = `${this.SERVICE_WECHAT}/list`
      let params = {
        wechatName: this.wechatSearchInfo.wechatName || null,
        wxAppid: this.wechatSearchInfo.appid || null,
        tenantId: this.wechatSearchInfo.tenantId || null,
        currentPage: this.page,
        pageSize: this.pageSize
      }
      this.get(url, params).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          this.count = +data.total
          if (data && data.list && data.list.length) {
            this.wechatList = data.list
          } else {
            this.wechatList = []
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    handleWechatSearch () {
      this.page = 1
      this.fetchWechatList()
    },
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.fetchWechatList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.fetchWechatList()
    },
    // 获取服务号列表
    fetchServiceList () {
      let url = `${this.SERVICE_WECHAT}/serviceList`
      this.get(url).then(res => {
        let data = res.data.data
        if (data) {
          this.serviceList = data
        } else {
          this.serviceList = []
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 切换公众号
    handleChage (info, mode) {
      sessionStorage.setItem('platformMode', mode)
      switch (mode) {
        case 'wechat':
          sessionStorage.setItem('currWechatData', JSON.stringify(info))
          sessionStorage.setItem('appid', info.appId)
          sessionStorage.setItem('wechatId', info.id)
          sessionStorage.setItem('wechatName', info.wechatName)
          sessionStorage.setItem('authorizationStatus', info.authorizationStatus)
          sessionStorage.setItem('wechatImg', info.qrcodeImg)
          sessionStorage.setItem('wechatType', info.wechatType)
          this.replaceRoute({name: 'Homepage'})
          break
        case 'corp':
          sessionStorage.setItem('corpName', info.corpName)
          sessionStorage.setItem('corpId', info.corpId)
          this.replaceRoute({name: 'cpAuth'})
          break
        default:
          break
      }
    },
    handleJump (type) {
      this.replaceRoute({name: 'platformAuth', query: {platformType: type}})
    },
    // 获取系统当前账号信息
    getAccountInfo () {
      let url = `${this.SERVICE_SYS}/account/current`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.isAdmin = data.isAdmin
            sessionStorage.setItem('isAdmin', data.isAdmin)
          }
        }
      })
    },
    // 获取租户列表
    fetchTenantList () {
      let url = `${this.SERVICE_TENANT}/search`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.tenantList = data
          } else {
            this.tenantList = []
          }
        }
      }).catch(err => {
        this.handleError(err)
      })
    }
  },
  created () {
    this.getAccountInfo()
    this.fetchTenantList()
    this.fetchWechatList()
  }
}
</script>
<style lang="stylus" scoped>
.platform-box
  height 100%
  background #fff
  border-radius 10px
  .mian
    width 100%
    height 100%
    .platform-wrapper
      width 100%
      padded_box(border-box, 30px)
      .wechat-wrapper
        width 100%
        // height 614px
        height 748px
        .guide-wrapper
          width 100%
          height 100%
          display flex
          justify-content center
          padded_box(border-box, 200px 0 0)
          .text
            height 20px
            line-height 20px
            font-size 16px
            color #606266
            .jump
              color #4C84FF
              cursor pointer
      .wechat-list-box
        height 100%
        display flex
        flex-direction column
        justify-content space-between
        .filter-box
          width 100%
          display flex
          justify-content space-between
          align-items center
          padded_box(border-box, 0 30px 20px)
          // padded_box(border-box, 30px 30px 20px)
          .filter-left
            display flex
            justify-content space-between
            align-items center
          .filter-right
            display flex
            justify-content space-between
            align-items center
          .search-select-box
            width 200px
          .search-btn
            color #3496ff
            cursor pointer
            font-size 12px
        .wechat-list
          width 100%
          padded_box(border-box, 0 0 0 30px)
          scroll()
          scroll-bar()
          height auto
          // max-height 564px
          max-height 656px
          display flex
          flex-wrap wrap
          .wechat-item
            // width 310px
            width 286px
            height 200px
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(28, 41, 90, 0.04);
            border-radius: 10px;
            border: 1px solid #EAEDF7
            box-sizing border-box
            margin 0 20px 30px 0
            &.active
              border 1px solid #4C84FF
              .title
                background #4C84FF
                .name
                  color #fff
              .bottom
                .btn
                  border 1px solid #d2d4d8
                  color #fff
                  background #d2d4d8
            .title
              height: 44px;
              background #d9dde1
              border-radius: 8px 8px 0px 0px;
              // background: #4C84FF;
              // border-radius 8px
              padded_box(border-box, 0 20px)
              display flex
              justify-content space-between
              align-items center
              .name
                width calc(100% - 40px)
                height 24px
                line-height 24px
                font-size: 16px;
                color #22242f
                // color #fff
                no-wrap()
            .info
              width 100%
              display flex
              justify-content space-between
              padded_box(border-box, 18px 10px 20px 20px)
              position relative
              &:hover
                .btn-wrapper
                  display block
              .info-left
                padded_box(border-box, 2px 0 0 )
                .text
                  height: 16px;
                  font-size: 12px;
                  color: #5E5E66;
                  line-height: 16px
                  & + .text
                    margin-top 8px
                  &.time
                    margin-top 11px
              .info-right
                display flex
                flex-direction column
                justify-content space-between
                align-items flex-end
                .status
                  width: 44px;
                  height: 25px;
                  line-height: 26px;
                  text-align center
                  // background: #D2D4D8;
                  border-radius: 4px;
                  font-size: 12px;
                  // color: #FFFFFF;
                  color #999
                  margin-right -3px
                  &.active
                    color #52C41A
                    // background: #13C789;
                    position relative
                    &::after
                      content ''
                      display block
                      width 16px
                      height 16px
                      background url('~assets/img/icon_succ@2x.png') no-repeat center/ 100%
                      position absolute
                      left -18px
                      top 50%
                      transform translate(0, -50%)
                .qrcode
                  width 72px
                  height 72px
                  background #ddd
                  img
                    width 100%
              .btn-wrapper
                width 100%
                height 150px
                background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)
                border-radius 0 0 10px 10px
                position absolute
                bottom 0
                left 50%
                transform translate(-50%, 0)
                display none
                .btn
                  width: 220px;
                  height: 36px;
                  line-height: 36px;
                  text-align center
                  border-radius: 8px;
                  border: 1px solid #fff
                  font-size: 16px;
                  color: #fff;
                  box-sizing border-box
                  cursor pointer
                  position absolute
                  bottom 15px
                  left 50%
                  transform translate(-50%, 0)
.edit-wechat-dialog
  >>> .el-dialog
    margin-top 10vh !important
  >>> .el-dialog__body
    padding-top 20px
  .demo-ruleForm
    .form-select-box
      width 360px
      height: auto;
      min-height: 36px;
      >>>.el-input__inner
        min-height: 36px !important
    .form-split
      display flex
      align-items center
      position relative
      left -20px
      width 100%
      margin-bottom 20px
      .split-title
        font-size 15px
        font-weight 700
        flex none
        margin-right 10px
      .split-line
        height 1px
        flex 1
        background-color #eee
    .copy-input
      position absolute
      display block
      width 0
      height 0
      opacity 0
    .setting-item-wrapper
      >>> .el-form-item__label
        line-height 20px
      >>> .el-form-item__content
        line-height 20px
        margin-right 40px
    .setting-item
      display flex
      align-items center
      .item-content
        width 0
        flex 1
        no-wrap()
        color #15c78a
        font-size 12px
      .item-copy
        color: #fc713d;
        cursor: pointer;
        font-size 12px
</style>
